<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15">
<title>Ahorro</title>
<style type="text/css">
h3{
color:#F56600;
text-transform:Capitalize;

}
h4{
font-size:15px;
}
</style>
<link type="text/css" href="css/style.css" rel="stylesheet" />
<link type="text/css" href="css/jquery-ui-1.8.21.custom.css" rel="stylesheet" />

<!-- end -->


<!--  Core jQuery  -->

<script type="text/javascript" src="scripts/jquery-1.7.2.min.js"></script>
<!--  Donut -->

<script type="text/javascript" src="scripts/jquery.donutchart.js"></script>
<!--[if lte IE 8]>
    <script type="text/javascript" src="scripts/excanvas.compiled.js"></script>
<![endif]-->
<!--  jQuery UI-->
<script type="text/javascript" src="scripts/ui/jquery-ui-1.8.21.custom.js"></script>
<script type="javascript" src="scripts/ui/jquery.ui.core.js"></script>
<script type="javascript" src="scripts/ui/jquery.ui.widget.js"></script>
<script type="javascript" src="scripts/ui/jquery.ui.button.js"></script>
<script type="javascript" src="scripts/ui/jquery.ui.sortable.js"></script>
<script type="javascript" src="scripts/ui/jquery.ui.progressbar.js"></script>


  
</head>
<body>
<div>
	<ul>
	<li> 
	<div>
		<!-- grupo -->
		<h2 style="border-bottom:1px solid #ddd;">Alertas</h2>
		<div style="margin-left:2em">
		<div style="background-color:#ccc;widht:50%;height:5em;font-size:14px;padding:0.5em;">	
			<ol>
			<ul>Revisado</ul>
			</ol>	
			
		</div>
					
		<p>Aqui definiriamos un template xslt, para definir las alertas</p>	
		<h3>propiedades Comunes</h3>
		<table>
		<tr><td>width:250px;</td></tr>
		<tr><td>height:54px;</td></tr>
		<tr><td>border:1px solid #fff;</td></tr>			
		<tr><td>border-radius:5px;</td></tr>
		</table><br/><br/>
		
		<!-- elemento-->
		<h4>caja_alerta_roja</h4>
		<h3>propiedades</h3>
		<table>
		<tr><td>background-color:#f4b9bc;</td></tr>
		</table><br/><br/>
		<div class="caja_alerta_roja">
			<div class="caja_tipo_roja" > <div class="button-alerta alerta-excl-roja"></div></div>		
			<div class="caja_alerta_contenido">
				<span class="texto_titulo_alertas ">Eam aeterno </span><br/>
				<span class="texto_alertas">Eam aeterno reprehendunt ex</span><br/>
				<span class="texto_alertas_relevante">Reprehendunt ex, iusto </span><br/>
			</div> 
		</div>
		<div style="clear:both"></div>
		</div>
		
		<!-- elemento-->
		<h4>caja_alerta_azul</h4>
		<h3>propiedades</h3>
		<table>
		<tr><td>background-color:#8ab7ca;</td></tr>
		</table><br/><br/>
		<div class="caja_alerta_azul">
			<div class="caja_tipo_azul" > <div class="button-alerta alerta-excl-azul"></div></div>	
			<div class="caja_alerta_contenido">
				<span class="texto_titulo_alertas ">Eam aeterno </span><br/>
				<span class="texto_alertas">Eam aeterno reprehendunt ex<br/>Reprehendunt ex, iusto </span><br/>
			</div> 			
		</div>
		</div>
		<div style="clear:both"></div>
		<!-- elemento-->
		<h4>caja_alerta_verde</h4>
		<h3>propiedades</h3>
		<table>
		<tr><td>background-color:#7fca8f</td></tr>
		</table><br/><br/>
		<div class="caja_alerta_verde">
			<div class="caja_tipo_verde" > <div class="button-alerta alerta-excl-verde"></div></div>		
			<div class="caja_alerta_contenido">
				<span class="texto_titulo_alertas ">Eam aeterno </span><br/>
				<span class="texto_alertas">Eam aeterno reprehendunt ex<br/>Reprehendunt ex, iusto </span><br/>
			</div> 
			
		</div>
		</div>
		<div style="clear:both"></div>
		<!-- elemento-->
		<h3>Composicion de las Cajas de Alertas</h3>
		<h4>caja_alerta_contenido</h4>
		<h3>propiedades</h3>
		<table>
		<tr><td>float:right;</td></tr>
		<tr><td>width:218px;</td></tr>
		<tr><td>padding-top:8px;</td></tr>
		<tr><td>texto_titulo_alertas <strong>CSS</strong></ td></tr>
		<tr><td>texto_alertas <strong>CSS</strong></td></tr>
		<tr><td>texto_alertas_relevante <strong>CSS</strong></td></tr>
		</table><br/><br/>
		
		
		<div style="clear:both"></div>

	</div>
	</li>
		
	</ul>
		<div style="clear:both"></div>

	


</div>	
	
</body>
</html>